<template>
	<div>
		<IInput v-model="content" type="textarea" :rows="8" placeholder="请输入回复内容" @on-change="change"></IInput>
		<Alert>
			<span v-if="now>=0">还可以输入{{now}}字</span>
			<span v-else style="color:red;">已超出{{abs(now)}}字</span>
		</Alert>
	</div>
</template>
<script>
	import {Alert,Input} from 'view-design';

	export default{
		props:{
			callback:{
				type: Function
			},
			maxNumber:{
				type: Number,
				default : 300,
			}
		},
		components:{
			'IInput' : Input,
			Alert,

		},
		data () {
			return {
				content : '',
				//当前文本框是否已超出最大字数状态
				status : true,
			}
		},
		methods:{
			abs(now){
				return Math.abs(now);
			},
			change(event){
				this.callback(this.content);
			}
		},
		computed:{
			now:function(){
				var now = parseInt(this.maxNumber)-parseInt(this.content.length);
				if(now<0){
					this.status = false
				}else{
					this.status = true;
				}
				return now;
				
			}
		},
	}
</script>